<template>
  <div class="shopDetails" v-wechat-title="title">
    <company-banner :bannerImg="bannerImg" :store_id="store_id"></company-banner>
    <div class="title_wrapper">
      <div class="store_title">{{store.store_title}}</div>
      <div class="zi_30">租<span class="transparent">金</span>金：<span class="hong_zi jiacu">{{store.store_money}}元</span>/月</div>
      <div class="zi_30">转让费：<span class="hong_zi jiacu" v-if="store.store_move_money==='面议'">{{store.store_move_money}}</span><span class="hong_zi jiacu" v-else>{{store.store_move_money}}万</span>
      </div>
      <div class="zi_30">建筑面积：<span class="hong_zi jiacu">{{store.store_area}}㎡</span></div>
    </div>
    <div class="zhan_hui"></div>
    <div class="info_wrapper">
      <div class="title">店铺信息</div>
      <div class="hui_zi zi_30">区<span class="transparent">区域</span>域：<span class="hei_zi">{{store.store_quyu}}</span></div>
      <div class="hui_zi zi_30">详细地址：<span class="hei_zi">{{store.store_city}}</span></div>
      <div class="hui_zi zi_30">支付方式：<span class="hei_zi">{{store.oshitsuke}}</span></div>
      <div class="hui_zi zi_30">剩余租期：<span class="hei_zi">{{store.remaining_lease}}个月</span></div>
      <ul class="info_details clearfix">
        <li>楼层：
          <span v-if="store.floor_type===3">独栋/共{{store.total_floor}}层</span>
          <span v-else-if="store.floor_type===2">{{store.floor}}-{{store.end_floor}}层/共{{store.total_floor}}层</span>
          <span v-else>{{store.floor}}层/共{{store.total_floor}}层</span>
        </li>
        <li>层高：<span>{{store.floor_height}}m</span></li>
        <li>进深：<span>{{store.go_deep}}m</span></li>
        <li>面宽：<span>{{store.width}}m</span></li>
      </ul>
    </div>
    <div class="zhan_hui"></div>
    <company-facility :facility="facility"></company-facility>
    <div class="zhan_hui"></div>
    <company-content :storeContent="store.store_content"></company-content>
    <div class="map_wrapper">
      <div class="title">地图交通</div>
      <div id="map" ref="map" style="width:100%;height:3.2rem;"></div>
    </div>
    <company-bottom :name="store.store_user" :showCertify="store.is_collection" :id="store.store_id"></company-bottom>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import CompanyBanner from './components/CompanyBanner'
import CompanyFacility from './components/CompanyFacility'
import CompanyContent from './components/CompanyContent'
import CompanyBottom from './components/CompanyBottom'
import facility from '../../assets/json/facility.json'
export default {
  name: 'shopDetails',
  components: {
    CompanyBanner,
    CompanyFacility,
    CompanyContent,
    CompanyBottom
  },
  data () {
    return {
      store_id: this.$route.params.id,
      bannerImg: [],
      store: [],
      facility: facility,
      title: '店铺详情'
    }
  },
  beforeMount () {
    this.getShopInfo()
  },
  methods: {
    getShopInfo () {
      this.$axios.post(process.env.API_HOST + '/api/store/store_detail', {
        id: this.store_id
      }).then(this.getShopInfoSucc)
        .catch(error => console.log(error))
    },
    getShopInfoSucc (res) {
      if (res.data.code === 1) {
        this.bannerImg = res.data.data.store_images.split(',')
        for (var b = 0; b < this.bannerImg.length; b++) {
          if (this.bannerImg[b] === '') {
            this.bannerImg.splice(b, 1)
          } else {
            let newStr = this.bannerImg[b].indexOf('http')
            if (newStr !== 0) {
              this.bannerImg[b] = this.baseUrl + this.bannerImg[b]
            }
          }
        }
        this.store = res.data.data
        this.title = this.store.store_title
        let facilityL = res.data.data.facility
        if (facilityL) {
          let facilityA = facilityL.split(',')
          for (var i = 0; i < facilityA.length; i++) {
            for (var k = 0; k < this.facility.length; k++) {
              if (facilityA[i] === this.facility[k]['title']) {
                this.facility[k]['is_action'] = true
              }
            }
          }
        }
        this.map()
      }
    },
    map () {
      var map = new BMap.Map("map")
      map.centerAndZoom(new BMap.Point(116.331398, 39.897445), 18)
      var myGeo = new BMap.Geocoder()
      let _this = this
      myGeo.getPoint(this.store.store_city, function (point) {
        if (point) {
          map.centerAndZoom(point, 18)
          var marker = new BMap.Marker(point, {title: _this.store.store_title})
          map.addOverlay(marker)
          var opts = {
            title: _this.store.store_title
          }
          var infoWindow = new BMap.InfoWindow('地址：' + _this.store.store_city, opts)
          map.openInfoWindow(infoWindow, point)
        } else {
          alert('您选择的地址没有解析到结果！')
        }
      })
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.shopDetails
  width 100%
  height 100%
  overflow auto
.title_wrapper
  padding .2rem /* 10/50 */ .4rem /* 20/50 */
  div
    height .38rem /* 19/50 */
    line-height .38rem /* 19/50 */
    margin-bottom .1rem /* 10/50 */
  .store_title
    font-size .4rem /* 20/50 */
    font-weight bold
    line-height .6rem
    height auto
    text-overflow -o-ellipsis-lastline
    overflow hidden
    text-overflow ellipsis
    display -webkit-box
    -webkit-line-clamp 2
    line-clamp 2
    -webkit-box-orient vertical
.zhan_hui
  width 100%
  height .2rem /* 10/50 */
  background #F8F8F8
.info_wrapper
  padding .2rem /* 10/50 */ .4rem /* 20/50 */
  div
    line-height .48rem /* 24/50 */
    margin-bottom .06rem /* 3/50 */
.info_details
  border-top 1px solid rgba(0,0,0,.1)
  margin-top .2rem /* 10/50 */
  padding-top .13rem /* 6.5/50 */
  li
    float left
    width 50%
    line-height .54rem /* 27/50 */
.map_wrapper
  padding .2rem /* 10/50 */ .4rem /* 20/50 */
  margin-bottom 1.54rem /* 77/50 */
.title
  height .74rem /* 37/50 */
  font-size .36rem /* 18/50 */
  font-weight bold
  line-height .74rem /* 37/50 */
  color #333333
</style>
